@import '~modern-normalize/modern-normalize.css';
@import './variables.css';
@import './fonts.css';
@import './rc-slider.css';

html {
  height: 100%;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-family);
  height: 100%;
  margin: 0;
  padding: 0;
}

body.scroll-lock {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

h1 {
  font-weight: normal;
}

a {
  color: var(--link-color);
  font-weight: bold;
  cursor: pointer;
}

svg {
  vertical-align: bottom;
}

/* Form elements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select {
  display: block;
  width: 100%;
  padding: 8px;
  font-size: 18px;
  box-shadow: inset 1px 1px 3px 0px rgba(50, 50, 50, 0.75);
  border: none;
  border-radius: var(--border-radius);
  color: var(--input-color);
  background-color: var(--input-bg-color);
}

::placeholder {
  color: var(--input-placeholder-color);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus,
button:focus {
  box-shadow: inset 0px 0px 5px 3px var(--input-outline-color);
  outline: none;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="search"]::-webkit-search-cancel-button {
  appearance: none;
  -webkit-appearance: none;
}

/* Buttons */
button {
  background-color: var(--btn-default-bg-color);
  border: none;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  color: var(--btn-default-color);
  cursor: pointer;
  display: inline-block;
  font-weight: inherit;
  padding: 16px;
  width: 100%;
}

button.primary {
  background-color: var(--btn-primary-bg-color);
  color: var(--btn-primary-color);
}

@supports (backdrop-filter: saturate(250%) blur(20px)) or (-webkit-backdrop-filter: saturate(250%) blur(20px)) {
  .bg-blur {
    background-color: transparent !important;
    -webkit-backdrop-filter: saturate(250%) blur(20px);
    backdrop-filter: saturate(250%) blur(20px);
  }
}

mark {
  color: inherit;
  background-color: var(--mark-bg-color);
}
